<template>
    <section class="simple-title">
        <header class="header-inner clearfix">
            <span class="title" >{{title}}</span>
            <div class="more">
                <slot></slot>
            </div>
        </header>
    </section>
</template>

<script>
export default {
  name: 'SimpleTitle',
    props: {
      title: {
          type: String,
          required: true
      }
    },
  data () {
      return {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  @import "../../style/style.less";
    .simple-title {
        .header-inner {
            height: 47px;
            line-height: 47px;
            border-bottom: 1px solid @theme-color-dark;
            color: @theme-color-dark;
            .more {
                float: right;
                font-size: 14px;
            }
            .title {
                float: left;
                font-size: 18px;
                font-weight: bold;
            }
        }
    }
</style>
